<template>
	<w-dailog
		v-model="dialogVisible"
		width="1000px"
		:title="title"
		fullscreen
		:showMoreBtn="true"
		:beforeClose="onBeforeClose"
		@close="onRefresh"
	>
    <template slot="sub">
			<fx-detials-state-tag :label="currentState['label']" :icon="currentState['icon']"></fx-detials-state-tag>
		</template>
		<template slot="tools">
			<w-link icon="delete-trash" type="default" @click="onDeleteClick">删除</w-link>
		</template>
		<div class="create-organ" slot-scope="{ fullScreen }">
			<w-scroll-bar :flex="fullScreen">
        <basicInfo
					ref="basicInfo"
					:visibleFlag="dialogVisible"
					:stationTaskDetails="stationTaskDetails"
					:disabled="true"
				></basicInfo>
        <detailsInfo
					ref="detailsInfo"
					:disabled="true"
					:stationTaskDetails="stationTaskDetails"
					:tableDetails="tableDetails"
				></detailsInfo>
			</w-scroll-bar>
		</div>
		<template slot="footer">
			<el-button @click="onCancelClick">取消</el-button>
			<fx-button type="save" @click="onSaveClick">保存</fx-button>
		</template>
	</w-dailog>
</template>
<script>
import basicInfo from './BasicInfo.vue'
import detailsInfo from './DetailsInfo.vue'
export default {
	name: 'createProcessTask',
	components: {
		basicInfo,
		detailsInfo
	},
	data () {
		return {
			title: '',
			dialogVisible: false,
			stationTaskDetails: {},
			tableDetails: [],
			itemList: [],
			fxDataVerification: this.$fxUtils.fxDataVerification()
		}
	},
	computed: {
		isAdd () {
			return !this.stationTaskDetails.id
		},
		currentState () {
			return this.$fxStateMiddleware.getStateObj('stationTaskState')(this.stationTaskDetails.state)
		},
		// isChecked () {
		// 	return this.$fxStateMiddleware.isState('billState')(['checked'])(this.stationTaskDetails.busState)
		// },
		isState () {
			return (type) => {
				return this.$fxStateMiddleware.isState('billState')(type)(this.stationTaskDetails.busState)
			}
		}
	},
	methods: {
		async edit (stationTaskDetails, tableDetails) {
			this.stationTaskDetails = stationTaskDetails
			this.tableDetails = tableDetails
			this.fxDataVerification.resetData(this.stationTaskDetails)
			this.title = '编辑工位任务单'
			this.dialogVisible = true
		},
		// 保存按钮
		onSaveClick () {
			this.$refs.detailsInfo.checkDetailsUnSaving().then(() => {
				if (this.fxDataVerification.checkData(this.stationTaskDetails)) {
					this.$fxMessage.success('保存成功')
				} else {
					this.onSaveClickHandler()
				}
			})
		},
		onSaveClickHandler () {
			return this.onValidateFormData().then(this.onSaveProgramHandler)
		},
		onValidateFormData () {
			return new Promise(resolve => {
				this.$refs.basicInfo.validate().then(() => {
					resolve()
				}).catch(() => {
					this.$fxMessage.warning('请填写必填信息')
				})
			})
		},
		onSaveProgramHandler () {
			const { id, remark } = this.stationTaskDetails
			const postData = {
				id,
				remark
			}
			if (this.fxDataVerification.checkData(this.stationTaskDetails)) {
				this.$fxMessage.success('保存成功')
			} else {
				return this.$fxApi('schedule.saveStationTaskRemark')({ data: postData }).then(res => {
					this.fxDataVerification.resetData(this.stationTaskDetails)
					// this.onDetailsRefresh()
					return Promise.resolve(res)
				})
			}
		},
		// 刷新明细
		onDetailsRefresh () {
			return this.$fxApi('schedule.findProdureTaskDetail')({
				query: {
					procedureTaskId: this.stationTaskDetails.id
				}
			}).then(res => {
				this.tableDetails = res
				return Promise.resolve(res)
			})
		},
		// 刷新主表
		onMainRefresh (planId) {
			return this.$fxApi('schedule.findProdureTask')({
				query: {
					id: planId
				}
			}).then(res => {
				return Promise.resolve(res)
			})
		},
		// 取消
		onCancelClick () {
			this.verificationDetails().then(() => {
				this.onSaveClickHandler().then(() => {
					this.dialogVisible = false
				})
			}).catch(() => {
				this.dialogVisible = false
			})
		},
		onBeforeClose (close) {
			this.verificationDetails().then(() => {
				this.onSaveClickHandler().then(close)
			}).catch(() => {
				this.dialogVisible = false
			})
		},
		verificationDetails () {
			return this.fxDataVerification.checkComfirm(this.stationTaskDetails)
		},
		onRefresh () {
			this.$emit('on-refresh')
		},
		onDeleteClick () {
			this.$fxConfirm('是否确定删除当前单据？')
				.then(this.onDeleteHandler)
				.then(this.onCancelClick)
		},
		onDeleteHandler () {
			return this.$fxApi('schedule.stationTaskDel', this.stationTaskDetails.id).then(res => {
				this.fxDataVerification.resetData(this.stationTaskDetails)
				return Promise.resolve()
			})
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.create-organ {
	flex: 1
	display: flex;
	flex-direction: column;
	overflow: auto;
}
</style>
